<script setup>
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {iconListService} from "@/api/icon.js"
import {bgListService} from "@/api/bg.js"
import {ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
//导入token
import {useTokenStore} from "@/stores/token.js";
const tokenStore = useTokenStore()

//上传图片成功地回调函数
const uploadSuccess = (result)=>{
  iconModel.value.iconUrl = result.data;
  bgModel.value.bgUrl = result.data;
  console.log(result.data);
}
//背景图片
const bgPicData = ref()
const bgPicData1 = ref()
const bgType = ref()
const getBgPicList = async () =>{
  let params1 = {
    bgType: bgType.value ? bgType.value : null
  }
  let params2 = {
    bgType: 'swip'
  }
  const res1 = await bgListService(params1)
  const res2 = await bgListService(params2)
  bgPicData.value = res1.data
  bgPicData1.value = res2.data
  console.log(bgPicData.value)
}
getBgPicList()
//图标列表
const iconData = ref()
const iconData1 = ref("")
const iconData2 = ref("")
const getIconList = async () => {
  let params1 = {
    iconType: "menu"
  }
  let params2 = {
    iconType: "menu"
  }
  const res = await iconListService()
  const res1 = await iconListService(params1)
  const res2 = await iconListService(params2)
  iconData.value = res.data
  iconData1.value = res1.data
  iconData2.value = res2.data
}
getIconList()

//添加图标
import {iconAddService} from "@/api/icon.js";
const addIcon = async () => {
  let result = await iconAddService(iconModel.value)
  ElMessage.success(result.msg? result.msg:"添加成功")
  //抽屉消失
  visibleIcon.value = false
  await getIconList()
}
//编辑图标
import {iconUpdateService} from "@/api/icon.js";
const updateIcon = async () => {
  let result = await iconUpdateService(iconModel.value)
  ElMessage.success(result.msg? result.msg:"修改成功")
  //抽屉消失
  visibleIcon.value = false
  await getIconList()
}
//删除图标
import {iconDeleteService} from "@/api/icon.js";
const deleteIcon = async (row) => {
  //提示用户 确认框
  ElMessageBox.confirm(
      '你确认要删除吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let result = await iconDeleteService(row.iconId);
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新列表
        await getIconList();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//添加图片
import {bgAddService} from "@/api/bg.js";
const addBg = async () => {
  let result = await bgAddService(bgModel.value)
  ElMessage.success(result.msg? result.msg:"添加成功")
  //抽屉消失
  visibleBg.value = false
  await getBgPicList()
}
//编辑图片
import {bgUpdateService} from "@/api/bg.js";
const updateBg = async () => {
  let result = await bgUpdateService(bgModel.value)
  ElMessage.success(result.msg? result.msg:"修改成功")
  //抽屉消失
  visibleBg.value = false
  await getBgPicList()
}
//删除图片
import {bgDeleteService} from "@/api/bg.js";
const deleteBg = async (row) => {
  //提示用户 确认框
  ElMessageBox.confirm(
      '你确认要删除吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let result = await bgDeleteService(row.bgId);
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新列表
        await getBgPicList();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//图标抽屉
import { ElButton, ElDrawer } from 'element-plus'

const title = ref()
//显示抽屉
const visibleIcon = ref(false)
const visibleBg = ref(false)

//图标抽屉数据
const iconModel = ref({
  iconId: '',
  iconName: '',
  iconUrl: '',
  iconType: '',
  iconDesc: '',
  addressUrl: '',
  iconCreateTime: '',
  iconUpdateTime: ''
})
//背景抽屉数据
const bgModel = ref({
  bgId: '',
  bgName: '',
  bgUrl: '',
  bgType: '',
  bgDesc: '',
  bgCreateTime: '',
  bgUpdateTime: ''
})
const bgDrawerData = (row) => {
  bgModel.value.bgId = row.bgId
  bgModel.value.bgName = row.bgName
  bgModel.value.bgUrl = row.bgUrl
  bgModel.value.bgType = row.bgType
  bgModel.value.bgDesc = row.bgDesc
  bgModel.value.bgCreateTime = row.bgCreateTime
  bgModel.value.bgUpdateTime = row.bgUpdateTime
}

const clearBgData = () =>{
  bgModel.value.bgId = ''
  bgModel.value.bgName = ''
  bgModel.value.bgUrl = ''
  bgModel.value.bgType = ''
  bgModel.value.bgDesc = ''
  bgModel.value.bgCreateTime = ''
  bgModel.value.bgUpdateTime = ''
}
const iconDrawerData = (row) => {
  iconModel.value.iconId = row.iconId
  iconModel.value.iconName = row.iconName
  iconModel.value.iconUrl = row.iconUrl
  iconModel.value.iconType = row.iconType
  iconModel.value.iconDesc = row.iconDesc
  iconModel.value.addressUrl = row.addressUrl
  iconModel.value.iconCreateTime = row.iconCreateTime
  iconModel.value.iconUpdateTime = row.iconUpdateTime
}
const clearIconData = () =>{
  iconModel.value.iconId = ''
  iconModel.value.iconName = ''
  iconModel.value.iconUrl = ''
  iconModel.value.iconType = ''
  iconModel.value.iconDesc = ''
  iconModel.value.addressUrl = ''
  iconModel.value.iconCreateTime = ''
  iconModel.value.iconUpdateTime = ''
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="header">
            <span class="header-style">菜单模块</span>
            <el-button type="primary" @click="visibleIcon = true;title='添加图标';clearIconData()">添加</el-button>
          </div>
        </template>
        <el-table height="296px" :data="iconData1" style="width: 100%; border: 2px solid #dadada; border-radius: 5px">
          <el-table-column prop="iconName" label="名称" align="center"></el-table-column>
          <el-table-column label="图标" align="center">
            <template #default="{ row }">
              <img style="width: 40px;height: 40px;border-radius: 50%;object-fit: cover;" :src="row.iconUrl" class="avatar" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button :icon="Edit" size="small" plain type="primary" @click="visibleIcon = true;title='编辑图标';iconDrawerData(row)"></el-button>
              <el-button :icon="Delete" size="small" plain type="danger" @click="deleteIcon(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="header">
            <span class="header-style">首页轮播图</span>
            <el-button type="primary"  @click="visibleBg = true;title='添加图片';clearBgData()">添加</el-button>
          </div>
        </template> 
        <el-carousel height="267px" indicator-position="outside">
          <el-carousel-item class="carousel-item" v-for="item in bgPicData1" :key="item.bgId">
            <div class="image-container">
              <el-image class="carousel-image" :src="item.bgUrl"></el-image>
            </div>
            <div class="button-container">
              <el-button :icon="Edit" type="primary" size="small" @click="visibleBg = true;title='编辑图片';bgDrawerData(item)" plain></el-button>
              <el-button :icon="Delete" type="danger" size="small" plain @click="deleteBg(item)"></el-button>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>
      <el-drawer v-model="visibleBg" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">{{title}}</h4>
          <el-icon @click="close" class="el-icon--center"><CloseBold /></el-icon>
        </template>
        <el-form :model="bgModel" label-width="100px">
          <el-form-item label="图片名称">
            <el-input v-model="bgModel.bgName" placeholder="请输入图片名称"></el-input>
          </el-form-item>
          <el-form-item label="图片类型">
            <el-input v-model="bgModel.bgType" placeholder="请输入图片类型"></el-input>
          </el-form-item>
          <el-form-item label="图片备注">
            <el-input v-model="bgModel.bgDesc" placeholder="请输入图片备注"></el-input>
          </el-form-item>
          <el-form-item label="图片地址">
            <el-input v-model="bgModel.bgUrl" placeholder="无需输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" action="/api/image/bg" name="file" :headers="{'Authorization': tokenStore.token}" :on-success="uploadSuccess">
              <img v-if="bgModel.bgUrl" :src="bgModel.bgUrl" class="bgPic" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="title==='添加图片'?addBg():updateBg()">确定</el-button>
            <el-button type="info" @click="visibleBg = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-col>
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="header">
            <span class="header-style">底部导航栏</span>
            <el-button type="primary"  @click="visibleIcon = true;title='添加图标'">添加</el-button>
          </div>
        </template>
        <el-table height="296px" :data="iconData" style="width: 100%; border: 2px solid #dadada; border-radius: 5px">
          <el-table-column prop="iconName" label="名称" align="center"></el-table-column>
          <el-table-column label="图标" align="center">
            <template #default="{ row }">
              <img style="width: 40px;height: 40px;border-radius: 50%;object-fit: cover;" :src="row.iconUrl" class="avatar" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button :icon="Edit" size="small" plain type="primary" @click="visibleIcon = true;title='编辑图标';iconDrawerData(row)"></el-button>
              <el-button :icon="Delete" size="small" plain type="danger" @click="deleteIcon(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
  <el-drawer v-model="visibleIcon" :show-close="false" :title="title" >
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{title}}</h4>
      <el-icon @click="close" class="el-icon--center"><CloseBold /></el-icon>
    </template>
    <el-form :model="iconModel">
      <el-form-item label="图标名称">
        <el-input v-model="iconModel.iconName" placeholder="请输入图标名称"></el-input>
      </el-form-item>
      <el-form-item label="图标类型">
        <el-select v-model="iconModel.iconType" placeholder="请选择图标类型">
          <el-option label="菜单" value="menu"></el-option>
          <el-option label="其他" value="other"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图标描述">
        <el-input v-model="iconModel.iconDesc" placeholder="请输入图标描述"></el-input>
      </el-form-item>
      <el-form-item label="请求地址">
        <el-input v-model="iconModel.addressUrl" placeholder="请输入图标跳转地址"></el-input>
      </el-form-item>
      <el-form-item label="图标地址">
        <el-input v-model="iconModel.iconUrl" placeholder="请输入图标地址" disabled></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" action="/api/image/icon" name="file" :headers="{'Authorization': tokenStore.token}" :on-success="uploadSuccess">
          <img v-if="iconModel.iconUrl" :src="iconModel.iconUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="title==='添加图标'?addIcon():updateIcon()">确定</el-button>
        <el-button type="info" @click="visibleIcon = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <el-card style="margin-top: 10px">
    <template #header>
      <div class="header">
        <span class="header-style">其他背景</span>
        <el-form inline style="">
          <el-form-item label="类型">
            <el-select placeholder="请选择" v-model="bgType" style="width: 200px">
              <el-option label="swip" value="swip"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin: 0px;">
            <el-button type="primary" @click="getBgPicList()">搜索</el-button>
            <el-button @click=";bgType=null;clearBgData();getBgPicList()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary"  @click="visibleBg = true;title='添加图片';clearBgData()">添加</el-button>
      </div>
    </template>
    <el-table :data="bgPicData" style="width: 100%; border: 2px solid #dadada; border-radius: 5px">
      <el-table-column prop="bgName" label="名称" align="center"></el-table-column>
      <el-table-column prop="bgType" label="类型" align="center"></el-table-column>
      <el-table-column prop="bgDesc" label="备注" align="center"></el-table-column>
      <el-table-column label="图片" align="center">
        <template #default="{ row }">
          <img style="width: 40px;height: 40px;object-fit: cover;" :src="row.bgUrl" class="avatar" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button :icon="Edit" type="primary" size="small" @click="visibleBg = true;title='编辑图片';bgDrawerData(row)" plain></el-button>
          <el-button :icon="Delete" type="danger" size="small" plain @click="deleteBg(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-style {
  display: flex;
  align-items: center;

  font-weight:bolder;
  font-size: 20px;
}
.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.carousel-image {
  width: auto;
  height: 200px;
  object-fit: cover;
}
.button-container {
  margin-top: 10px;
  display: flex;
  gap: 30px; /* 添加按钮之间的间距 */
}
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .bgPic {
      width: 300px; /* 指定宽度 */
      height: auto; /* 高度自适应 */
      object-fit: cover; /* 保持比例，裁剪多余部分 */
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.el-form-item{
  margin-bottom:0;
}
</style>